<template>
<!-- 充值卡 -->
  <div class="Recharge">
      <div class="Recharge-head">
        <router-link tag="div" to="life">
          <img src="../../../assets/Life/返回icon.png" alt="">
        </router-link>
        <span class="deposit">宜居储蓄卡</span>
        <span class="exchange">兑换</span>
        <span class="money">0.00</span>
        <span class="balance">当前余额</span>
      </div>
      <div class="Recharge-money">
        <p class="buck">￥100.00</p>
        <p class="present">赠送100元</p>
        <p class="people">新人优惠</p>
        <p class="buy">购买</p>
      </div>
      <div class="Recharge-money">
        <p class="buck">￥300.00</p>
        <p class="present">赠送20元</p>
        <p class="buy">购买</p>
      </div>
      <div class="Recharge-money">
        <p class="buck">￥500.00</p>
        <p class="present">赠送40元</p>
        <p class="buy">购买</p>
      </div>
      <div class="Recharge-money">
        <p class="buck">￥1000.00</p>
        <p class="present">赠送100元</p>
        <p class="buy">购买</p>
      </div>
      <div class="Recharge-money">
        <p class="buck">￥1200.00</p>
        <p class="present">赠送120元</p>
        <p class="buy">购买</p>
      </div>
      <div class="Recharge-money">
        <p class="buck">￥2000.00</p>
        <p class="present">赠送200元</p>
        <p class="buy">购买</p>
      </div>
  </div>
</template>

<script>
export default {
    name:"recharge"
}
</script>

<style>
body{
  background: #e6e6e6;
}

.Recharge-head{
  background: url(../../../assets/Life/上方蓝色部分.png);
  width: 100%;
  height: 5rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}
img{
  float: left;
  padding: 0.2rem;
  width: 0.45rem;
}
.deposit{
  font-size: 0.3rem;
  color: #fff;
  float: left;
  margin: 0.2rem 2.1rem;
}
.exchange{
  margin: 0.25rem 0.2rem 0 0;
  float: right;
  font-size: 0.25rem;
  color: #fff;
}
.money{
  font-size: 1.5rem;
  color: #fff;
  float: left;
  margin: 0.4rem 2.3rem;
}
.balance{
  font-size: 0.3rem;
  color: #fff;
  margin-top: 0.4rem;
}
.Recharge-money{
  background: #fff;
  float: left;
  margin: 0 0.2rem 0.1rem;
  position: relative;
}
.buck{
  float: left;
  font-size: 0.35rem;
  margin: 0.3rem 5.2rem 0.1rem 0.2rem;
}
.present{
  font-size: 0.25rem;
  color: rgba(0, 0, 0, 0.6);
  float: left;
  margin: 0.2rem 0 0.3rem 0.2rem;
}
.people{
  position: absolute;
  right: 0.2rem;
  top: 0.2rem;
  font-size: 0.2rem;
  color: #ff5555;
}
.buy{
  position: absolute;
  right: 0.2rem;
  top: 0.8rem;
  background-color:#00BFFF;
  border-radius: 4px;
  color: #fff;
  font-size: 0.25rem;
  padding: 0.1rem;
  letter-spacing:0.1rem
}
</style>